<template>
  <div class="project_square_container" @keydown.enter="selectSearch">
    <div class="filterBar_container">
      <!-- <a-input v-model:value="selectedData.name" placeholder="请输入项目名称"
 				style='width:150px;' />
				<a-input v-model:value="selectedData.teacherName" placeholder="请输入指导老师姓名"
					style='width:150px;' /> -->
      <div class="select_container">
			<div style="width: 82%;display: flex;justify-content: space-between;">
          <a-input
          v-model:value="selectedData.name"
          :placeholder="t('control', '项目名称')"
          style="width: 180px"
        />

        <div class="selectBox">
          <!-- <div>年级:</div> -->
          <a-date-picker
            style="width:180px"
            v-model:value="grade"
            picker="year"
            :allowClear="false"
            :placeholder="t('control', '年级')"
            @change="gradeChange"
          />
        </div>
        <div class="selectBox">
          <!-- <div>类别:</div> -->
          <a-select
            ref="select"
            v-model:value="selectedData.category"
            style="width: 180px"
            :placeholder="t('control', '类别')"
            :options="typeOptions"
          >
          </a-select>
        </div>
        <div class="selectBox">
          <!-- <div>报名状态:</div> -->
          <a-select
            ref="select"
            v-model:value="selectedData.registrationStatus"
            style="width: 180px"
            :placeholder="t('control', '报名状态')"
            :options="signUpStatusOptions"
          >
          </a-select>
        </div>
        <div class="selectBox">
          <!-- <div>招募状态:</div> -->
          <a-select
            ref="select"
            v-model:value="selectedData.recruitStatus"
            style="width: 180px"
            :placeholder="t('control', '招募状态')"
            :options="recruitmentStatusOptions"
          >
          </a-select>
        </div>
        <a-input
          v-model:value="selectedData.teacherName"
          :placeholder="t('control', '指导老师姓名')"
          style="width: 180px"
        />
        </div>
        <div>
          <a-button
            type="primary"
            @click="selectSearch"
            style="margin-right: 10px"
            >{{t('control', '查询')}}</a-button
          >
          <a-button @click="clear">{{t('control', '重置')}}</a-button>
        </div>
      </div>
    </div>
    <div class="content_container">
      <!-- <SquareProjectList :projectList="projectList" @projectItemClick="projectItemClick" 
 			:current='current.value' :total='total.value' :pageSize='pageSize.value' @paginationChange='paginationChange'/> -->
      <SquareProjectList
        :projectList="projectList"
        @projectItemClick="projectItemClick"
        :pageData="pageData"
        @paginationChange="paginationChange"
      />
    </div>
  </div>
</template>

<script setup>
import SquareProjectList from '@/components/SquareProjectList.vue'
import { ref, reactive, onMounted, watch } from 'vue'
import { Modal } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { isTeacher } from '@/stores/info'
import { t } from '@/i18n'
import {
  getProjectList,
  checkGrade,
  getOptions,
} from '@/request/projectSquare.js'
import { year } from 'dayjs'

const router = useRouter()

onMounted(async () => {
  await getProjectSquareList()
  await getOptionsList('project_category', typeOptions)
})

//获取选择框的options列表项
async function getOptionsList(dictType, options) {
  let res = await getOptions(dictType)
  if (res && res.code == 200) {
    res.data.forEach((item, i) => {
      options.push({
        label: item.dictName,
        value: item.dictValue,
      })
    })
  }
}

let typeOptions = reactive([])
// const typeOptions1 = [
// 	{ label: '科研课题', value: '科研课题' },
// 	{ label: '商业项目', value: '商业项目' },
// 	{ label: '公益项目', value: '公益项目' },
// 	{ label: '模拟项目', value: '模拟项目' },
// 	{ label: '训练大作业', value: '训练大作业' },
// ];

const signUpStatusOptions = [
  { label: t('control', '未开始'), value: '0' },
  { label: t('control', '招募中'), value: '1' },
  { label: t('control', '已截止'), value: '2' },
]

const recruitmentStatusOptions = [
  { label: t('control', '未招满'), value: '0' },
  { label: t('control', '已招满'), value: '1' },
]
////////////////////////选择框
const selectedData = reactive({
  // grade: '',//年级
  // category: '全部',//类别
  // registrationStatus: '全部',//报名状态
  // recruitStatus: '全部',//招募状态
  // name: '',//项目名称
  // teacherName:''//指导老师姓名
})
//当年级改变时自动赋值
const grade = ref(null)
watch(grade, (newVal) => {
  if (newVal) {
    console.log(newVal.year())
    selectedData.grade = newVal.year()
  } else {
    selectedData.grade = ''
  }
})
//筛选出选择框中变化的选值
//不是初始值‘全部’和‘’
function getSelectedChangedData() {
  let selectChangedData = {}
  for (let key in selectedData) {
    if (selectedData[key] != '' && selectedData[key] != '全部') {
      selectChangedData[key] = selectedData[key]
    }
  }
  return selectChangedData
}
//点击查询按钮
async function selectSearch() {
  let selectData = getSelectedChangedData()
  console.log('selectData', selectData)
  console.log('pageData', pageData)
  let data = {
    page: 0,
    size: pageData.pageSize,
    ...selectData,
  }
  await getProjectSquareList(data)
}
//点击重置按钮
function clear() {
  console.log(111)
  for (let key in selectedData) {
    selectedData[key] = undefined // 重置为默认值
    grade.value = ''
    // selectedData.name=''
    // selectedData.teacherName=''
  }
  console.log('selectedData', selectedData)
  getProjectSquareList()
}
///////////////////列表和分页
const projectList = reactive([])
const pageData = reactive({
  total: 0,
  current: 0,
  pageSize: 10,
})
//分页改变
async function paginationChange(page, size) {
  pageData.current = page
  pageData.pageSize = size
  let selectData = getSelectedChangedData()
  console.log('selectData', selectData)
  let data = {
    page: page - 1,
    size: size,
    ...selectData,
  }
  await getProjectSquareList(data)
}
// 获取项目列表
async function getProjectSquareList(data) {
  const res = await getProjectList({
    size: pageData.pageSize,
    ...data,
  })
  console.log('res', res)
  if (res && res.code === 200) {
    console.log(res.data, 'res.datares.data')
    const resData = res.data
    // Object.assign(projectList, [...resData.content]);
    pageData.total = resData.page.totalElements
    pageData.current = resData.page.number + 1
    pageData.pageSize = resData.page.size
    projectList.splice(0, projectList.length, ...resData.content)
    // console.log(pageData,projectList)
  }
}
//点击单个项目
async function projectItemClick(item) {
  if (isTeacher()) {
    let href = router.resolve({
      name: 'ProjectInterview',
      query: { id: item.id, isCheckedJob: true },
    })
    window.open(href.href, '_blank')
    return
  }
  let res = await checkGrade(item.id)
  if (res && res.code == 200 && res.data) {
    let href = router.resolve({
      name: 'ProjectInterview',
      query: { id: item.id, isCheckedJob: true },
    })
    window.open(href.href, '_blank')
  } else {
    Modal.confirm({
      okText: t('modal', '继续查看'),
      content: t('modal', '您的年级不符合应聘要求'),
      onOk() {
        let href = router.resolve({
          name: 'ProjectInterview',
          query: { id: item.id, isCheckedJob: false },
        })
        window.open(href.href, '_blank')
      },
    })
  }
}
</script>

<style lang="scss" scoped>
$filterBarContainerHeight: 10%;
$filterBarContainerMinHeight: 60px;
$searchMarginRight: 50px;
* {
  box-sizing: border-box;
}
.project_square_container {
  height: 100%;
  width: $viewMinWidth;
  display: flex;
  flex-direction: column;
  min-height: 0;
  .filterBar_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 18px;
    background: #ffffff;
    /* background-color: $theme1BgColor2; */
    margin-bottom: 20px;

    .select_container {
      /* width:calc(100% - 200px - #{$searchMarginRight}*2); */
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .selectBox {
        display: flex;
        align-items: center;

        & > div {
          margin-right: 3px;
        }
      }
    }
  }
  .content_container {
    flex: 1;
    min-height: 0;
    width: 100%;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 10px;

  }
}
</style>
